<template>
	<div class="div_body">
	    <div class="div_head">
	        <i class="fa fa-angle-left" aria-hidden="true" @click="$router.back()"></i>
	        <span>MALL登录注册</span>
	    </div>
	    <div class="div_form">
	        <div class="div_phone" v-if="SwitchTo">
	            <div class="">
	                <label for="">
	                    <span>+86</span>
	                    <i class="fa fa-chevron-down" aria-hidden="true"></i>
	                </label>
	                <input maxlength="18" placeholder="请输入手机号" type="text" name="" id="" />
	            </div>
	            <div>
	                <input maxlength="8" placeholder="请输入收到的验证码" type="text" name="" id="" value="" />
	                <button v-on:click="pushCode">{{ time }}</button>
	            </div>
	        </div>
	        <div class="div_account" v-else>
	            <div>
	                <input max="32" placeholder="邮箱/手机号" type="text" name="" id="" v-model="form.login.format"/>
	            </div>
	            <div>
	                <input maxlength="32" placeholder="请输入密码" type="password" name="" id="" v-model="form.login.pwd" />
	                <button>忘记密码</button>
	            </div>
	        </div>
	        <div class="div_login">
	            <button v-on:click="login">登录</button>
	        </div>
	        <div class="div_SwitchingMode">
	            <span v-on:click="toggle">{{ msg }}</span>
	            <span>手机快速注册</span>
	        </div>
	        <div class="div_OtherLogin">
	            <h1>其他登录方式</h1>
	            <div>
	                <i class="layui-icon layui-icon-login-wechat"></i>
	                <span>微信</span>
	            </div>
	        </div>
	    </div>
	</div>
	<div id="c1"></div>
</template>

<script>
	import axios from 'axios';
	var layer;
	layui.use('layer',function(){
		layer=layui.layer;
	});
	export default {
		data(){
			return {
				SwitchTo:true,
				msg:'帐号密码登录',
				time:'获取验证码',
				form:{
					login:{
						act:'',
						format:'',
						pwd:'',
						token:''
					}
				},
				timeNumber:true,
				timeStatus:true,
				Captcha:null
			}
		},
		mounted: function () {
			var This=this;
			var myCaptcha = _dx.Captcha(document.getElementById('c1'), {
				style: 'popup',
				appId: '3e2899b290481e6f214a3862950dc0bf', //appId，在控制台中“应用管理”或“应用配置”模块获取
				success: function (token) {
					This.form.login.token=token;
					This.form.login.format.indexOf('@')===-1?This.form.login.act='phone':This.form.login.act='email';
					axios({
						url:'/3.php',
						method:"post",
						data:This.form.login
					}).then(function(res){
						
						console.log(res);
					}) 
				}
			});
			this.Captcha=myCaptcha;
			
			if(parseInt(this.$assist.session.get('time')))
			{
				this.timeDown();
			}
		},
		methods:{
			pushCode(){
				if(!this.timeStatus)
				{
					return false;
				}
				this.timeDown();
				//发起请求
			},
			toggle(){
				var phone='短信验证码登录';
				var account='帐号密码登录';
				if(this.SwitchTo)
				{
					this.SwitchTo=false;
					this.msg=phone;
				}else{
					this.SwitchTo=true;
					this.msg=account;
				}
			},
			login(){
				if(this.SwitchTo)
				{
					this.phone();
					return false;
				}
				var format=this.form.login.format;
				if(!format)
				{
					layer.msg('请填写邮箱或手机号');
					return false;
				}
				if(format.indexOf('@')!==-1)
				{
					var status=this.$verify.email(format);
					if(!status)
					{
						layer.msg('错误的邮箱格式');
						return false;
					}
				}else{
					var status=this.$verify.phone(format);
					if(!status)
					{
						layer.msg('错误的手机格式');
						return false;
					}
				}
				this.Captcha.show();
			},
			phone(){
				//手机注册登录
				var status=this.$verify.phone(this.form.login.format);
				if(!status)
				{
					layer.msg('错误的手机格式');
					return false;
				}
				this.Captcha.show();
				
			},
			timeDown(){
				this.timeStatus=false;
				var This=this;
				if(parseInt(this.$assist.session.get('time')))
				{
					var time=this.$assist.session.get('time');
				}else{
					this.$assist.session.set('time',60);
					var time=60;
				}
				this.timeNumber=setInterval(function(){	
					if(time<0)
					{
						clearInterval(This.timeNumber);
						This.time='获取验证码';
						This.timeStatus=true;
						return false;
					}
					This.time=time;
					This.$assist.session.set('time',time);
					time--;
				},1000);
			}
		},
	};
	
	
</script>
<style>
	body{
		background: white;
	}
</style>
<style  src="../../assets/css/login.css" scoped>
	
</style>
